<template>
  <q-dialog v-model="visible">
    <q-card style="min-width: 40vw; height: 80%">
      <q-card-section
        class="text-h6"
        :class="$q.dark.isActive ? '' : 'text-black'"
      >
        {{ user.username }}{{ $t(lang + "text1") }}
        <q-btn
          icon="close"
          dense
          flat
          round
          v-close-popup
          class="float-right"
        />
      </q-card-section>
      <div class="q-pa-md row q-col-gutter-sm">
        <!--  树状    -->
        <tree-select
          :simple="simple"
          v-model="ticked"
          :ticked="ticked"
          class="col-12 col-sm-6"
        />
        <div class="col-12 col-sm-6">
          <div class="text-h6 text-center">{{ $t(lang + "text2") }}</div>
          <div class="text-center" v-if="ticked.length !== 0">
            <div v-for="tick in ticked" :key="`ticked-${tick}`" class="q-mt-sm">
              {{ tick }}
            </div>
          </div>
          <div class="text-center q-mt-sm text-grey" v-else>
            {{ $t(lang + "text3") }}
          </div>
        </div>
      </div>
      <div class="absolute-bottom text-center q-ma-sm">
        <q-btn
          no-caps
          :label="$t(lang + 'text4')"
          style="min-width: 10rem"
          color="primary"
          @click="confirm"
        />
      </div>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref } from "vue";
import routerLinks from "src/router/routerLinks";
import { useFunctionsStore } from "stores/functions";
import { useQuasar } from "quasar";
import { useAPIStore } from "stores/api";
import TreeSelect from "components/user/TreeSelect.vue";
import { useI18n } from "vue-i18n";
import { userApi } from "boot/axios";

const t = useI18n().t;
const lang = "userIndex.AuthorityAllocation.";
const $q = useQuasar();
const emit = defineEmits(["refresh"]);
const visible = ref(false);
// 选中的模块
const ticked = ref([]);
// 获取当前模式下的模块
const appList = routerLinks(useFunctionsStore().mode);
// 渲染树选择表数据
const simple = ref([
  {
    title: t(lang + "text5"),
    children: [],
  },
]);
// 用户信息
const user = ref({});

// 显示弹窗获取用户信息
function show(data) {
  ticked.value = [];
  visible.value = true;
  // 赋值
  simple.value[0].children = appList;
  user.value = data;
  // 将字符串转json
  const info = JSON.parse(user.value.info);
  // 没有数据时不操作
  if (!info) return;
  info.forEach((item) => {
    ticked.value.push(item.title);
  });
}
// 确认分配权限 并循环获取模块的实体
function confirm() {
  // 判断不得为0个
  if (ticked.value.length === 0)
    return $q.notify({ type: "warning", message: t(lang + "text6") });
  const moduleList = [];
  // 获取模块实体
  appList.forEach((item) => {
    ticked.value.forEach((data) => {
      if (item.title === data) {
        moduleList.push(item);
      }
    });
  });
  // 转成json格式
  user.value.info = JSON.stringify(moduleList);
  // 修改用户数据
  userApi
    .put(useAPIStore().centerUrl + "user", user.value)
    .then((res) => {
      if (res.data === t(lang + "text7")) {
        $q.notify({ type: "positive", message: t(lang + "text8") });
        visible.value = false;
        emit("refresh");
      } else {
        $q.notify({ type: "warning", message: t(lang + "text9") });
      }
    })
    .catch(() => {
      $q.notify({ type: "warning", message: t(lang + "text10") });
    });
}
defineExpose({ show });
</script>
